<template>
  <div class="comment-container">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" :error.sync="error" error-text="加载失败,请点击重试" @load="onLoad">
      <CommentItem v-for="(item, index) in list" :key="index" :comment="item" @reply-click="$emit('reply-click', $event)" />
    </van-list>
  </div>
</template>

<script>
import { getComment } from '@/api/comment'
import CommentItem from './CommentItem.vue'
export default {
  name: 'ArticleComment',
  components: {
    CommentItem
  },
  props: {
    // 如果获取文章评论，则传递文章 ID
    // 如果获取评论回复，则传递评论 ID
    source: {
      required: true,
      type: [Number, String, Object]
    },
    // 获取文章评论，使用字符 a
    // 获取评论回复，使用字符 c
    type: {
      type: String,
      default: 'a'
    },
    list: {
      type: Array,
      // 数组或对象的默认值必须通过函数返回
      default: () => []
      // default: function () {
      //   return []
      // }
    }
  },
  data () {
    return {
      // list: [], // 列表数据
      loading: false,
      finished: false,
      offset: null, // 获取下一页数据的标记
      limit: 10, // 默认获取10条数据
      error: false // 加载失败，默认false
    }
  },
  created () {
    // 组件一加载就执行请求
    this.onLoad()
  },
  methods: {
    async onLoad () {
      try {
        // 1.请求获取数据
        const { data } = await getComment({
          type: this.type, // 评论类型，a-对文章(article)的评论，c-对评论(comment)的回复
          source: this.source.toString(), // 源id，文章id或评论id
          offset: this.offset, // 获取评论数据的偏移量，值为评论id，表示从此id的数据向后取，不传表示从第一页开始读取数据
          limit: this.limit // 每页大小
        })
        // 2.将数据添加到列表中
        // console.log(data)
        const { results } = data.data
        this.list.push(...results)
        // 把文章评论数量传递到外部
        this.$emit('onload-success', data.data)

        // 3.将loading设置为false
        this.loading = false
        // 4.判断是否还有数据
        if (results.length) {
          this.offset = data.data.last_id
        } else {
          // 没有数据就将finished设置结束
          this.finished = true
        }
      } catch (err) {
        // 加载失败
        // console.log(err)
        this.error = true
        this.loading = false
      }
    }
  }
}
</script>

<style scoped lang="less">
</style>
